<template>
  <div class="home">
    <!-- 个人信息面板 -->
    <div class="one">
      <div class="oneLeft">
        <div>
          <p>{{ userInfo.nickname }}</p>
          <span>{{ userInfo.intro }}</span>
        </div>
        <van-image
          width="40"
          height="40"
          fit="cover"
          round
          :src="'http://huangjiangjun.top:1337' + userInfo.avatar"
          @click="$router.push('/layout/home/personal')"
        />
      </div>
      <!-- 4个信息 -->
      <div class="one4">
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <h3>{{ userInfo.submitNum }}</h3>
            <div>累计答题</div>
          </van-grid-item>
          <van-grid-item>
            <h3>{{ collectQuestions }}</h3>
            <div>收藏题目</div>
          </van-grid-item>
          <van-grid-item>
            <h3>{{ userInfo.errorNum }}</h3>
            <div>我的错题</div>
          </van-grid-item>
          <van-grid-item>
            <h3>{{ correctLv }}%</h3>
            <div>正确率</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="zhiye">
        <van-cell
          title="我的职业"
          is-link
          :value="userInfo.position"
          icon="idcard"
        />
      </div>
    </div>
    <!-- 数据面板 -->
    <div class="two">
      <div>
        <h4>面板数据</h4>
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <div class="zuotian">
              昨日阅读<a href="#"
                >+{{
                  userInfo.shareData && userInfo.shareData.read.yesterday
                }}</a
              >
            </div>
            <h2>{{ userInfo.shareData && userInfo.shareData.read.total }}</h2>
            <span>阅读总数</span>
          </van-grid-item>
          <van-grid-item>
            <div class="zuotian">
              昨日获赞<a href="#"
                >+{{
                  userInfo.shareData && userInfo.shareData.star.yesterday
                }}</a
              >
            </div>
            <h2>{{ userInfo.shareData && userInfo.shareData.star.total }}</h2>
            <span>获攒总数</span>
          </van-grid-item>
          <van-grid-item>
            <div class="zuotian">
              昨日评论<a href="#"
                >+{{
                  userInfo.shareData && userInfo.shareData.comment.yesterday
                }}</a
              >
            </div>
            <h2>
              {{ userInfo.shareData && userInfo.shareData.comment.total }}
            </h2>
            <span>评论总数</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <!-- 底部列表 -->
    <div class="san">
      <van-cell
        title="我的面经分享"
        is-link
        icon="coupon-o"
        :value="userInfo.history && userInfo.history.share.length"
      />
      <van-cell
        title="我的消息"
        is-link
        icon="chat-o"
        :value="userInfo.systemMessages"
      />
      <van-cell title="收藏的题库" is-link icon="label-o" value="32" />
      <van-cell
        title="收藏的企业"
        is-link
        icon="like-o"
        :value="userInfo.collectArticles && userInfo.collectArticles.length"
      />
      <van-cell
        title="我的错题"
        is-link
        icon="description"
        :value="errorQuestions"
      />
      <van-cell
        title="收藏的面试经验"
        is-link
        icon="star-o"
        :value="userInfo.history && userInfo.history.technic.length"
      />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo || {}
    },
    correctLv () {
      return (
        parseInt(
          (1 - this.userInfo.errorNum / this.userInfo.submitNum) * 1000
        ) / 10
      )
    },
    collectQuestions () {
      return (
        this.$store.state.login.userInfo.collectQuestions &&
        this.$store.state.login.userInfo.collectQuestions.length
      )
    },
    errorQuestions () {
      return (
        this.$store.state.login.userInfo.errorQuestions &&
        this.$store.state.login.userInfo.errorQuestions.length
      )
    }
  },
  created () {
    // let num = 0
    // for (let i = 0; i < this.userInfo.errorQuestions.length; i++) {
    //   num = num + this.userInfo.errorQuestions[i]
    // }
    // console.log(num)
  }
}
</script>

<style lang="less" scoped>
.home {
  background-color: #f7f4f5;

  margin-bottom: 45px;
  .one {
    height: 250px;
    background-color: #c1002e;
    padding: 30px 4vw 0;
    position: relative;

    .oneLeft {
      color: #fff;
      display: flex;
      padding: 20vw 0 0;
      justify-content: space-between;

      p {
        font-size: 24px;
        font-weight: 800;
        margin-bottom: 5px;
      }
      span {
        font-weight: 300;
        font-size: 12px;
        // padding-top: 20px;
      }
      .van-image {
        border: 4px #fff solid;
      }
    }
    .one4 {
      // padding: 0 4vw;
      .van-grid-item {
        color: #fff;
        div {
          margin-top: 5px;
          font-weight: 300;
          color: rgb(252, 248, 248);
          font-size: 12px;
        }
      }
      ::v-deep .van-grid-item__content {
        background-color: #c1002e;
      }
    }
    .zhiye {
      transform: translate(0, 30%);
      .van-cell {
        background-color: #fff;
        border-radius: 8px;
      }
    }
  }
  .two {
    width: 345px;
    height: 127.5px;
    background-color: #fff;
    margin: 22.5px 4vw 0;
    border-radius: 8px;
    div {
      padding: 7.5px;
      ::v-deep .van-grid-item {
        background-color: yellow;
        padding: 0;
        .zuotian {
          color: #b7bbcd;
          a {
            font-size: 10px;
            color: aqua;
          }
        }
        span {
          font-size: 14px;
        }
        .van-grid-item__content {
          padding: 0;
        }
        div {
          font-size: 10px;
        }
      }
    }
    // padding: 7.5px;
  }
  .san {
    padding: 10px 4vw;
    border-radius: 8px;
  }
}
</style>
